<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="closeDialog"
      :show-close="true"
      :append-to-body="true"
      :class="{'mobile-el-dialog mobile-el-dialog-form': showMobilePage}"
      :close-on-click-modal="false"
      class="create-resource global-dailog-style"
    >
      <div :style="{maxHeight: '80vh'}" class="body-form">
        <MoreAccountInfo ref="moreAccountInfo" :model-data="modelData" :row-span="rowSpan" :rule-parent-key="['moreAccountInfo']" dialog/>
        <fixed-pagination style="width: 100%; padding: 0; margin: 0; border-radius: 0px 0px 8px 8px">
          <div class="center mobile-btn-group">
            <el-button :loading="loading" size="small" class="btn mobile-btn-flex" type="primary" @click.stop="handelOk">确定</el-button>
            <el-button size="small" class="btn cancel-btn-style" type="default" plain @click.stop="closeDialog">取消</el-button>
          </div>
        </fixed-pagination>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Title from '@/components/Title';
import { mapState } from 'vuex';
import mixins from './mixins';
import { editmoreAccountInfo } from '@/api/resource';
import MoreAccountInfo from '../create/model/moreAccountInfo.vue';

export default {
  components: { Title, MoreAccountInfo },
  mixins: [mixins],
  data() {
    return {
      modelData: {},
      loading: false,
      dialogVisible: false,
      editResourceForm: {
        id: '',
        fansNum: '',
        city: '',
        sex: '',
        averageReadNum: '',
        exposure: '',
        averageInteractionNum: '',
        averagePlayNum: '',
        averageLikeNum: '',
        summary: '',
        collection: '',
        dynamicKey: [],
        wxCode: '',
        audience: '',
        dailyAverageReadNum: '',
        wxInfluence: '',
        outInfluence: ''
      }
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    refs() {
      return ['moreAccountInfo'];
    }
  },
  methods: {
    openDialog(params) {
      const { data } = params || {};
      this.modelData = data;
      this.getDynamic(this.modelData, ['moreAccountInfo']);
      this.dialogVisible = true;
    },
    closeDialog() {
      this.editResourceForm = {
        id: '',
        fansNum: '',
        city: '',
        sex: '',
        averageReadNum: '',
        exposure: '',
        averageInteractionNum: '',
        averagePlayNum: '',
        averageLikeNum: '',
        summary: '',
        collection: '',
        dynamicKey: []
      };
      this.dialogVisible = false;
    },
    async handelOk() {
      const valid = await this.validateForm().catch((err) => { console.log(err); });
      if (!valid) {
        this.$message.warning('请检查信息是否填写完整');
        return;
      }
      const params = JSON.parse(JSON.stringify(this.editResourceForm));
      const moreAccountInfo = this.modelData.moreAccountInfo || {};
      const additionalKey = this.modelData.additionalKey;
      Object.keys(params).forEach(key => {
        if (moreAccountInfo[key] || moreAccountInfo[key] === 0) {
          params[key] = moreAccountInfo[key];
        }
        if (additionalKey[key] || additionalKey[key] === 0) {
          params[key] = additionalKey[key];
        }
      });
      params.id = this.modelData.systemId;
      this.loading = true;
      editmoreAccountInfo(params).then(res => {
        this.loading = false;
        if (res.code === 200) {
          this.$message.success('修改成功');
          this.$emit('success');
        }
        this.closeDialog();
      }).catch(() => {
        this.loading = false;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.create-resource {
  ::v-deep {
    .el-dialog {
      width: 960px;
    }
    .el-dialog__body {
      padding: 6px 24px 24px 24px !important;
    }
  }
}
.body-form {
  padding-bottom: 50px;
  @include scrollBar($x: hidden, $y: auto, $width: 6px);
}
.width240-time {
  width: 240px;
}
.width240 {
  width: 240px;
  &::v-deep {
    .el-input__inner {
      width: 240px;
    }
  }
}
.resource-edit-dialog {
  &::v-deep {
    .el-form-item__label {
      display: flex;
      justify-content: end;
      align-items: center;
      height: 32px;
      line-height: 1.1 !important;
    }
  }
}
.edit-btn-container {
  display: flex;
  justify-content: center;
}
::v-deep {
  .dynamicKey-label {
    .el-form-item__label {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .el-form-item__error {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 240px;
    }
  }
}
</style>
